<template>
  <div>
    <back/>
    <nav>收藏商品</nav>
    <section>
     <div v-for="(item,index) in collections" class="col-item">
      <img :src="item.img[0]" alt="">
      <div class="info">
         <p class="name">{{item.goodname}}</p>
         <p class="hot">{{item.collections.length}}人收藏</p>
         <p class="price">￥{{item.price}}</p>
      </div>
      
     </div>
    </section>
  </div>
</template>

<script>
import Back from '../../../components/Back/Back.vue'

export default {
  components: { Back },
  name: 'Collections',
  data () {
    return {
      collections:[]
    }
  },
  computed:{
   _id(){
    return this.$store.getters.user._id||JSON.parse(localStorage.getItem('userInfo'))._id || ''
   }
  },
  mounted(){
   this.initCollections()
  },
  methods:{
   async initCollections(){
    console.log(this._id)
    let data = await this.$axios({
     url:'/mall/collections',
     params:{
      uid:this._id
     }
    })
    this.collections = data.data
    console.log(this.collections)
   }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
nav{
 width: 100%;
 height: 44px;
 text-align: center;
 line-height: 44px;
 border-bottom: 1px solid #e6e6e6;
}
.col-item{
 padding: 5px 5px;
 width: 100%;
 /* height: 200px; */
 display: flex;
}
.col-item img{
 width: 150px;
 height: 150px;
 border-radius: 10px;
}
.info p{
 padding: 0 10px;
}
.name{
 padding: 0 10px;
}
.hot{
 font-size: 14px;
 color: #999;
}
.price{
 margin-top: 50%;
 padding: 0 10px;
 color: orangered;
}
</style>